<template>
  <div class="router-template">

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> 企业红黑榜</span>
        </div>


        <el-form :model="dataForm" ref="dataForm" :inline="true" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="企业红黑榜" prop="type"
                        :rules="[
                          { required: true, message: '企业红黑榜不能为空'},

                        ]">
            <el-select v-model="dataForm.type" placeholder="请选择" @change="select">
              <el-option label="企业红榜" value="0"></el-option>
              <el-option label="企业黑榜" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="连续/年"
            prop="year"
            :rules="[
                      { required: true, message: '连续/年不能为空'},
                      { type: 'number', message: '连续/年必须为数字值'}
                    ]">
            <el-input type="year" v-model.number="dataForm.year" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item
            v-if="dataForm.type === '1'"
            label="不合格"
            prop="count"
            :rules="[
                      { type: 'number', message: '不合格必须为数字值'}
                    ]">
            <el-input type="year" v-model.number="dataForm.count" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('dataForm')">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table
          :data="tableData"
          border
          height="320"
          max-height="360"
          style="width: 100%">
          <el-table-column header-align="center" prop="type" label="企业名称" min-width="100px"></el-table-column>
          <el-table-column header-align="center" prop="year" label="连续年数" min-width="100px"></el-table-column>
          <el-table-column v-if="isHei" header-align="center" prop="count" label="不合格数" min-width="100px"></el-table-column>
        </el-table>

      </el-card>
    </div>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        dataForm: {
          year: '',
          type: '1',
          count:''
        },
        isHei:false,
        tableData:[],
        data_hei:[
          {
            type:'XXXXX企业',
            year:'4',
            count:60
          },
          {
            type:'XXXXX企业',
            year:'3',
            count:70
          },
          {
            type:'XXXXX企业',
            year:'6',
            count:90
          },
          {
            type:'XXXXX企业',
            year:'5',
            count:70
          }
        ],
        data_hong:[
          {
            type:'XXXXX企业',
            year:'4'
          },
          {
            type:'XXXXX企业',
            year:'3'
          },
          {
            type:'XXXXX企业',
            year:'6'
          },
          {
            type:'XXXXX企业',
            year:'5'
          }
        ]
      };
    },
    methods:{
      submitForm(formName) {
        let that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (that.dataForm.count){
             let resultArr = that.data_hei.filter(function (item, index, self) {
                   return  item.year== that.dataForm.year && item.count == that.dataForm.count
              });
             that.tableData = resultArr
            }else {
              let resultArr = that.data_hei.filter(function (item, index, self) {
                console.log(that.dataForm.year, item.year)
                return  item.year== that.dataForm.year
              });
              that.tableData = resultArr
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      select(row){
        if (row == 0) {
          this.isHei = false
          this.tableData = this.data_hong

        } else if (row == 1){
          this.isHei = true
          this.tableData = this.data_hei
        }
        this.dataForm.year = ''
        this.dataForm.count = ''
      }
    },
    mounted(){
      this.isHei = true
      this.dataForm.type = "1"
      this.tableData = this.data_hei
    }
  };
</script>

<style>

</style>
